@require './config'

$mobileSidebarWidth = $sidebarWidth * 0.82

// narrow desktop / iPad
@media (max-width: $MQNarrow)
  .btn-download
    span
      display: none
  .navbar
    .nav-item
      margin-left: 0px
    .home-link
      margin-left: 1rem
      margin-right: 0rem
  .sidebar-link, .sidebar-heading
    padding-left .7rem !important
  .sidebar-map
    width "calc(100% - %s)" % $mobileSidebarWidth
    margin-left: $mobileSidebarWidth
    .carbon-img
      margin-bottom: 0px !important
    .notiads
      box-shadow: none !important
      border-bottom: 1px solid rgba(0,0,0,.03)
  .no-sidebar
    .sidebar-map
      .notiads
        padding-left: 30px
        box-shadow: none !important
        border-bottom: 1px solid rgba(0,0,0,.0)
  .sidebar
    font-size 15px
    width $mobileSidebarWidth
  .page
    padding-left $mobileSidebarWidth
    padding-right: 0
    h1
      padding-top 5rem !important
  .content:not(.custom)
    padding 0rem
  // .carbon
  //   width: 100%;
  //   padding-left: 13rem
  footer.footerx_theme
    width: 100% !important

// wide mobile
@media (max-width: $MQMobile)
  .no-sidebar
    .sidebar-map
      .notiads
        padding-left: 0px
  // .carbon
  //   width: 100%;
  //   padding-left: 0rem
  .sidebar-map
    width 100%
    margin-left: 0px !important
  .dropdown-wrapper
    display none
  .sidebar
    top 0
    padding-top $navbarHeight
    transform translateX(-100%)
    transition transform .2s ease
  .page
    padding-left 0
    padding-right: 0
  .theme-container.sidebar-open
    .sidebar
      transform translateX(0)
  h1
    font-size 1.3rem !important
    padding-top 5rem !important
    a
      display none
  footer.footerx_theme
    margin-top 100px !important
// narrow mobile
@media (max-width: $MQMobileNarrow)
  h1
    font-size 1.9rem
  .content:not(.custom)
    padding 0rem
  .content
    pre, pre[class*="language-"]
      margin 0.85rem 0
      border-radius 0
